<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h3>todolist</h3>
       <div><input type="text" v-model="addValue"><button @click="add">添加</button></div>
       <h3>没完成的项目</h3>
       <div v-for="(item,index) in unfinish">
           <input type="checkbox" @click="handle(index)">
           <span>{{item.item}}</span>
           <button @click="del(index)">删除</button>
        </div>
       <h3>已完成的项目</h3>
       <div v-for="(item,index) in unfinish">
           <span v-if="item.flag">{{item.item}}</span>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
               addValue:'',
               unfinish:[]
            },
            methods: {
                add(){
                    let obj = {item:this.addValue,flag:false}
                    this.unfinish.push(obj)
                    console.log(this.unfinish);
                },
                del(delValue){
                    this.unfinish = this.unfinish.filter(function(item,index){
                        return delValue!=index
                    })
                },
                handle(handleValue){
                    this.unfinish[handleValue].flag = !this.unfinish[handleValue].flag
                }
            }
        })
    </script>
</body>

</html>